<template>
  <searchArea :fieldlist="searchList" @search="search" @reset="search" />

  <q-table
    :grid="grid"
    :rows="data"
    :columns="columns"
    row-key="id"
    v-model:pagination="pagination"
    :loading="loading"
    :filter="filter"
    :rows-per-page-options="[25, 50, 100, 0]"
    @request="onRequest"
    binary-state-sort
    :visible-columns="visibleColumns"
    :style="$q.screen.xs ? '' : 'max-height: calc(100vh - 100px)'"
    class="my-sticky-virtscroll-table"
    :selection="selection"
    v-model:selected="selected"
  >
    <template v-slot:top>
      <div class="q-table__title q-mr-md">{{ modelLabel }}</div>
      <q-select
        label="选择显示列"
        v-model="visibleColumns"
        multiple
        borderless
        dense
        options-dense
        :display-value="visibleColumns.length + '/' + columns.length + '列'"
        emit-value
        map-options
        :options="columns"
        option-value="name"
        :style="{'min-width': $q.screen.xs ? '100px' : '150px'}"
      />
      <q-btn :icon="grid ? 'table_view' : 'grid_view'" dense @click="grid = !grid" />
      <q-space />
      <q-btn label="做任务" color="primary" :dense="$q.screen.xs" @click="doTask()" :disable="selected.length == 0">
      </q-btn>
    </template>
  </q-table>
</template>

<script>
import { defineComponent } from 'vue';
import searchArea from 'src/components/SearchArea.vue';
import { taskPageMix } from 'src/lib/mixin.js';
import pageConfig from 'app/search/tenant/delivery/task.js';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'deliveryTask',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '配送任务';
    const moduleName = 'delivery';
    const submoduleName = 'task';
    const taskApi = `/c2/tenant/${moduleName}/task`; // 任务数据列表接口
    const selection = 'multiple'; // 单选 single 多选 multiple

    useMeta({
      // 设置文件标题
      title: `${modelLabel}列表 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      submoduleName,
      taskApi,
      selection
    }
  },
  components: {
    searchArea
  },
  mixins: [taskPageMix],
  data () {
    return {
      pagination: {
        sortBy: 'd.id',
        descending: true,
        page: 1,
        rowsPerPage: 25,
        rowsNumber: 0
      },
      columns: [
        { name: 'bill_no', label: '销售单号', field: 'bill_no', sortable: true, align: 'center' },
        { name: 'type', label: '销售单类型', field: 'type', sortable: true, align: 'center', format: val => val && this.dictObj && this.dictObj.saleType && this.dictObj.saleType[val] && this.dictObj.saleType[val].label },
        { name: 'customer_name', label: '客户', field: 'customer_name', sortable: true, align: 'center' },
        { name: 'consumer_name', label: '消费者', field: 'consumer_name', sortable: true, align: 'center' },
        { name: 'material_name_model', label: '货物', field: 'material_name_model', sortable: true, align: 'center' },
        { name: 'sale_amount', label: '销售数量', field: 'sale_amount', sortable: true, align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}` },
        { name: 'deliver_amount', label: '已配送数量', field: 'deliver_amount', sortable: true, align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}` },
        { name: 'left_amount', label: '待配送数量', field: 'left_amount', align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}`, classes: 'text-bold text-primary' },
        { name: 'consignee', label: '联系人', field: 'consignee', sortable: true, align: 'center' },
        { name: 'tel', label: '联系电话', field: 'tel', sortable: true, align: 'center' },
        { name: 'address', label: '地址', field: 'address', sortable: true, align: 'center' }
      ]
    }
  },
  created () {
    this.assembly(pageConfig.search); // 根据配置生成搜索条件
  },
  mounted () {
  },
  methods: {
  },
  computed: {
  },
  watch: {
  }
});
</script>
